<template>
  <div class="main">
    <page-number :data="data"/>
    <body-page :data="data"/>
    <tabble :tableDate="data.stability_details" :checkData="checkData" :data="data"/>
    <lofting :check-data="checkData" :experiment="experiment"/>
    <change :historyList="historyList" />
  </div>
</template>

<script>
  import pageNumber from './modules/pageNumber'
  import bodyPage from './modules/body'
  import tabble from './modules/tabble'
  import lofting from './modules/lofting'
  import change from './modules/change'
  import { stabilityEditor } from '@/api/stability/giveUp'
  export default {
    name: 'index',
    components: {
      pageNumber,
      bodyPage,
      tabble,
      lofting,
      change
    },
    props: {
      data: {
        type: Object,
        default() {
          return {
            stability_details: []
          }
        }
      }
    },
    data() {
      return {
        checkData: {},
        experiment: [],
        historyList:[]
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},

    //属性是手动定义的所需监听的值
    watch: {
      data: {
        handler(newValue, oldValue) {
          if (newValue && newValue.stability_table_info) {
            this.checkData = JSON.parse(newValue.stability_table_info) || {}
            if (newValue.stability_plan !== "") {
              this.experiment = JSON.parse(newValue.stability_plan) || [];
            }
            if(newValue.id !== ''){
              this.handData(newValue.id)
            }

          }
        },
        deep: true,
        immediate: true
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      handData(id){
        stabilityEditor(id).then(res=>{
          if(res.code === 200){
            this.historyList = res.data.change_log
          }
        })
      }
    }

  }

</script>

<style scoped>
  /* @import url(); 引入css类 */
  @media print {

  }
</style>
